<template>
	<div class="overview">
		<ul>
			<li>{{ name }}</li>
			<li>{{ age }}</li>
		</ul>
		<div v-for="(item, index) in person" :key="index">
			{{ item.name }}
		</div>
		<div>{{ family.children[0].rank }}</div>
		<div>{{ family.rank }}</div>

		<span class="btn" @click="handleBtn">按钮</span>
	</div>
</template>

<script setup name="overview">
import { ref, shallowRef, reactive, watch } from 'vue';
const name = ref('姓名');
const age = ref(20);
const person = ref([{ name: '张三' }, { name: '李四' }]);
let family = reactive({ rank: 'father', children: [{ rank: 'son' }] });

const handleBtn = () => {
	person.value[0].name = 'ass';
	//family = { rank: 'sss' };
};

watch(
	() => family.rank,
	(newValue, oldValue) => {
		console.log('监听getter', newValue);
		console.log(newValue, oldValue);
	}
);
watch(person, (newValue, oldValue) => {
	console.log('数据源');
	console.log(newValue, oldValue);
});
</script>

<style lang="less" scoped>
.btn {
	display: block;
	padding: 10px;
	background-color: red;
	color: #ffff;
	cursor: pointer;
}
</style>
